<template>
	<uni-nav-bar :fixed="true" :border="false" :statusBar="true" @clickRight="openAdd">
		<!-- 左边 -->
		<block slot="left">
			<view class="nav-left">
				<text class="icon iconfont icon-qiandao"></text>
			</view>
		</block>
		<!-- 中间 -->
		<view class="nav-center uflex-a-j_c">
			<block v-for="(tab, index) in tabBars" :key="tab.id">
				<view class="uflex-a-j_c" :class="{'active':tabIndex===index}" @tap="changeTab(index)">{{tab.name}}<view class="nav-tab-bar-line"></view></view>
			</block>
		</view>
		<!-- 右边 -->
		<block slot="right">
			<view class="nav-right uflex-a-j_c">
				<text class="icon iconfont icon-bianji1"></text>
			</view>
		</block>
	</uni-nav-bar>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		props:{
			tabBars: Array,
			tabIndexs: Number
		},
		data() {
			return {
				tabIndex: 0
			}
		},
		methods:{
			changeTab(index) {
				this.$emit('change-tab', index)
			},
			openAdd(){
				// 打开发布页面
				uni.navigateTo({
					url: '../add-input/add-input',
					animationType: 'slide-in-bottom'
				})
			}
		},
		watch:{
			tabIndexs(newvalue){
				this.tabIndex = newvalue
			}
		},
		components:{
			uniNavBar
		}
	}
</script>

<style lang="scss" scoped>
	.nav-left > .iconfont, .nav-right > .iconfont{
		font-size: 50upx;
	}
	.nav-left{
		margin-left: 16upx;
		> text{
			color: #ff9619;
		}
	}
	.nav-right{
		width: 100%;
	}
	.nav-center{
		width: 100%;
		height: 100%;
		margin-left:-20upx ;
		> view{
			font-size: 36upx;
			padding: 0 15upx;
			font-weight: bold;
			position: relative;
			color: #999;
		}
		.active{
			color: #333!important;
			> .nav-tab-bar-line{
				border-bottom: 5upx solid #Fede33;
				border-top: 5upx solid #Fede33;
				width: 82upx;
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>
